<template>
    <div class="type_wrap_1">
        <div class="title_wrap">
            <div class="title">8月1日 直播进程</div>
        </div>
        <div class="process">
            <div class="left"></div>
            <div class="right">
                <div class="right_item">
                    <div class="top">
                        <div class="title">14:00-15:50 理享凉夏</div>
                    </div>
                    <div class="bottom">COLMO理享家沙龙</div>
                    <div class="bottom">COLMO空调新品发布直播</div>
                    <div class="live_app">
                        <img src="@/assets/images/live_app.png" />
                    </div>
                </div>
                <div class="right_item">
                    <div class="top">
                        <div class="title">16:05-17:15 理享厨房</div>
                    </div>
                    <div class="bottom">COLMO厨热新品发布直播</div>
                    <div class="live_detail">
                        <div class="title_wraps">
                            <div class="title">直播平台</div>
                        </div>
                        <div class="platform">
                            <!-- <div class="live_app_item tianmao">
                                <img src="@/assets/images/tianmao.jpg" />
                                <div class="title">colmmo厨卫电器专卖店</div>
                            </div>
                            <div class="live_app_item kandian">
                                <img src="@/assets/images/kandian.jpg" />
                            </div> -->
                            <div class="live_app_item yunxi">
                                <img src="@/assets/images/yunxi.png" />
                            </div>
                        </div>
                        <div class="title_wraps">
                            <div class="title">直播好礼</div>
                        </div>
                        <div class="live_goods">
                            <div class="live_goods_item" v-for="(item, index) in live_goods" :key="index">
                                <img :src="item.img" />
                                <div class="title">{{ item.title }}</div>
                            </div>
                        </div>
                        <div class="title_wraps mb">
                            <div class="title">直播嘉宾</div>
                        </div>
                        <div class="comment_wrap" v-for="(item, index) in comment" :key="index">
                            <div class="left">
                                <img :src="item.img" />
                            </div>
                            <div class="right">
                                <div class="title">{{ item.title }}</div>
                                <div class="sp">{{ item.sp }}</div>
                                <div class="content">{{ item.content }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            live_goods: [
                {
                    img: require('@/assets/images/live-good1.png'),
                    title: '双立人餐具30份'
                },
                {
                    img: require('@/assets/images/live-good2.png'),
                    title: '野兽派香薰15份'
                },
                {
                    img: require('@/assets/images/live-good3.jpg'),
                    title: '共5000元红包直播派发'
                }
            ],
            comment: [
                {
                    img: require('@/assets/images/comment-avatar1.png'),
                    title: '生活美学分享',
                    sp: '李敢  建筑设计师',
                    content: '江苏图灵空间装饰有限公司董事、设计总监；南京室内设计学会会员'
                },
                {
                    img: require('@/assets/images/comment-avatar2.png'),
                    title: '现场美食制作',
                    sp: '李阳 《拜托了冰箱》主厨',
                    content: '90后鲜厨奶爸；中国最年轻的意面世界冠军'
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.type_wrap_1 {
    width: 6.9rem;
    margin: 0.44rem auto 0;
    background-color: #fff;
    padding: 0 0 0.52rem;
    & > .title_wrap {
        height: 1.13rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 0.46rem;
        box-sizing: border-box;
        .title {
            font-size: 0.3rem;
            color: #000000;
            font-weight: 700;
            box-shadow: 0 -0.14rem 0px #cb8345 inset;
            display: inline-block;
            padding: 0 0.1rem;
        }
    }
    .process {
        display: flex;
        margin-bottom: 1rem;
        overflow: hidden;
        &>.left {
            width: 0.43rem;
            border-right: 0.015rem solid #000000;
            color: #fff;
        }
        &>.right {
            flex: 1;
            border-left: 0.015rem solid #000000;
            color: #000000;
            .right_item {
                padding: 0.1rem 0.44rem;
                position: relative;
                margin-bottom: 0.4rem;
                box-sizing: border-box;
                &:last-of-type {
                    margin-bottom: 0;
                }
                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 0.2rem;
                    font-weight: 700;
                    .title {
                        font-size: 0.3rem;
                        margin-right: 0.18rem;
                    }
                }
                .bottom {
                    font-size: 0.24rem;
                }
                &::after,
                &::before {
                    content: "";
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(calc(-50% - 0.015rem), -50%);
                }
                &::after {
                    width: 0.18rem;
                    height: 0.18rem;
                    background-color: #e0b58f;
                    z-index: 0;
                }
                &::before {
                    width: 0.12rem;
                    height: 0.12rem;
                    background-color: #cb8345;
                    z-index: 1;
                }
                .live_app {
                    padding-top: 0.33rem;
                    img {
                        width: 4.55rem;
                        height: 0.41rem;
                        display: block;
                    }
                }
                .live_detail {
                    margin-top: 0.42rem;
                    background-color: #f0edea;
                    padding: 0.33rem 0 0.4rem;
                    .title_wraps {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-weight: 700;
                        padding-left: 0.25rem;
                        box-sizing: border-box;
                        margin-bottom: 0.47rem;
                        .title {
                            font-size: 0.28rem;
                            color: #000000;
                            box-shadow: 0 -0.16rem 0px #cb8345 inset;
                            display: inline-block;
                            padding: 0 0.05rem;
                        }
                    }
                }
                .platform{
                    padding-left: 0.3rem;
                    margin-bottom: 0.74rem;
                    display: flex;
                    .live_app_item{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: column;
                        .title{
                            font-size: 0.22rem;
                        }
                        &.tianmao{
                            width: 1.27rem;
                            margin-right: 0.4rem;
                            img{
                                width: 0.62rem;
                                height: 0.62rem;
                                margin-bottom: 0.15rem;
                            }
                        }
                        &.kandian{
                            width: 1.7rem;
                            img{
                                width: 1.7rem;
                            }
                        }
                        &.yunxi{
                            width: 1.18rem;
                            img{
                                width: 1.18rem;
                            }
                        }
                    }
                }
                .live_goods{
                    padding: 0 0 0 0.17rem;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 0.72rem;
                    .live_goods_item{
                        width: 1.27rem;
                        margin-right: 0.41rem;
                        &:nth-child(3n){
                            margin-right: 0;
                        }
                        img{
                            width: 1.27rem;
                            height: 1.21rem;
                            display: block;
                            border-radius: 0.08rem;
                            margin-bottom: 0.22rem;
                        }
                        .title{
                            font-size: 0.22rem;
                            line-height: 0.28rem;
                            color: #000000;
                            text-align: center;
                        }
                    }
                }
                .mb{
                    margin-bottom: 0.5rem !important;
                }
                .comment_wrap{
                    // padding-top: 0.15rem;
                    display: flex;
                    margin-bottom: 0.9rem;
                    &:last-of-type{
                        margin-bottom: 0;
                    }
                    .left{
                        width: 0.93rem;
                        padding: 0.43rem 0 0 0.3rem;
                        img{
                            width: 0.93rem;
                            height: 0.93rem;
                            border-radius: 50%;
                            display: block;
                        }
                    }
                    .right{
                        padding:0 0.52rem 0 0.2rem;
                        flex: 1;
                        color: #000000;
                        .title{
                            font-size: 0.26rem;
                            padding-bottom: 0.13rem;
                            border-bottom: 1px solid #b5b5b5;
                            margin-bottom: 0.14rem;
                            font-weight: 700;
                        }
                        .sp{
                            font-size: 0.24rem;
                            margin-bottom: 0.15rem;
                        }
                        .content{
                            font-size: 0.23rem;
                            line-height: 0.3rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
